<template>
  <div class="py-2 w-full mx-auto" id="div-1">
    <a-flex vertical align="center" id="a-flex-1" class="w-full">
      <a-typography-paragraph class="w-full mt-20" id="a-typography-paragraph-14">
        <a-row class="flex items-center" id="a-row-8">
          <a-col class="flex-1 flex items-center justify-center" id="a-col-23">
            <a-divider class="bg-[#EE5C25]" id="a-divider-40" />
          </a-col>
          <a-col :span="1.5" class="flex items-center justify-center" id="a-col-24">
            <a-typography-text
              class="w-[20px] h-[20px] bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full"
              id="a-typography-text-111"
            />
          </a-col>
          <a-col :span="5" class="flex items-center justify-center" id="a-col-25">
            <a-typography-text class="font-bold text-[30px] text-[#EE5C25] px-20" id="a-typography-text-112">职业教育</a-typography-text>
          </a-col>
          <a-col :span="1.5" class="flex items-center justify-center" id="a-col-26">
            <a-typography-text
              class="w-[20px] h-[20px] bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full"
              id="a-typography-text-113"
            />
          </a-col>
          <a-col class="flex-1 flex items-center justify-center" id="a-col-27">
            <a-divider class="bg-[#EE5C25]" id="a-divider-41" />
          </a-col>
        </a-row>
        <a-flex vertical align="center" justify="center" id="a-flex-5" class="mt-[40px]">
          <a-typography-link href="#" class="!text-[#EE5C25]">
            这今里 工是江山等要事的验给东形性委他头 那川大山学水建产改处部浑易这今里工是江山等要事的验给东形性委他头
            那川大山学水建产改处部浑易
            <a-divider class="!my-2" />
          </a-typography-link>
        </a-flex>
        <a-row gutter="40" class="flex w-full mt-[20px] px-40" id="a-row-9">
          <a-col :span="6" class="flex flex-col" id="a-col-28">
            <a-flex justify="space-between" id="a-flex-18">
              <a-typography-text class="block flex-1 text-[22px] text-[#EE5B25] font-bold" id="a-typography-text-114"
                >青春校园</a-typography-text
              >
              <AppstoreFilled id="appstore-filled-8" class="text-[#e5e5e5] text-[22px]" />
            </a-flex>
            <a-typography-link href="#" class="!text-[#333333] relative w-full" id="a-typography-link-119">
              <a-image width="100%" src="https://picsum.photos/id/17/400/230" :preview="false" id="a-image-21" />
              <a-typography-paragraph
                class="!m-0 absolute left-0 right-0 bottom-0 bg-white bg-opacity-70 px-2 py-2"
                id="a-typography-paragraph-15"
              >
                <a-typography-text id="a-typography-text-115">大连医科大学走访慰问葫芦岛、朝阳</a-typography-text>
              </a-typography-paragraph>
            </a-typography-link>
            <a-list class="p-0" id="a-list-7">
              <a-list-item
                v-for="(item, index) in list12"
                :key="index"
                class="!px-0 !py-2 !border-b-0 overflow-hidden w-full"
                :id="`a-list-item-${46 + index}`"
              >
                <a-typography-link href="#" class="!text-[#999]" :id="`a-typography-link-${120 + index}`">
                  <a-badge
                    class="w-2 h-2 bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full mr-1"
                    :id="`a-badge-${25 + index}`"
                  />
                  <a-typography-text class="overflow-hidden" :id="`a-typography-text-${116 + index}`">
                    {{ item.title }}
                  </a-typography-text>
                </a-typography-link>
              </a-list-item>
            </a-list>
          </a-col>

          <a-col :span="10" class="flex flex-col" id="a-col-29">
            <a-flex justify="space-between" id="a-flex-19">
              <a-typography-text class="block flex-1 text-[22px] text-[#EE5B25] font-bold" id="a-typography-text-121"
                >教职动态</a-typography-text
              >
              <AppstoreFilled id="appstore-filled-9" class="text-[#e5e5e5] text-[22px]" />
            </a-flex>
            <a-list class="py-1" id="a-list-8">
              <a-list-item v-for="(item, index) in list13" :key="index" class="!px-0" :id="`a-list-item-${51 + index}`">
                <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-0" :id="`a-typography-link-${125 + index}`">
                  <a-badge color="#EE5B25" :id="`a-badge-${30 + index}`" />
                  <a-typography-text :id="`a-typography-text-${122 + index}`">
                    {{ item.title }}
                  </a-typography-text>
                </a-typography-link>
              </a-list-item>
            </a-list>
          </a-col>

          <a-col :span="6" id="a-col-30">
            <a-flex justify="space-between" id="a-flex-20">
              <a-typography-text class="block flex-1 text-[22px] text-[#EE5B25] font-bold" id="a-typography-text-132"
                >人才培养</a-typography-text
              >
              <AppstoreFilled id="appstore-filled-10" class="text-[#e5e5e5] text-[22px]" />
            </a-flex>
            <a-list class="py-1" id="a-list-9">
              <a-list-item v-for="(item, index) in list14" :key="index" class="!px-0 !border-b-0" :id="`a-list-item-${61 + index}`">
                <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-0" :id="`a-typography-link-${135 + index}`">
                  <a-badge
                    class="w-2 h-2 bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full mr-1"
                    :id="`a-badge-${40 + index}`"
                  />
                  <a-typography-text :id="`a-typography-text-${133 + index}`">
                    {{ item.title }}
                  </a-typography-text>
                </a-typography-link>
              </a-list-item>
            </a-list>
            <a-flex justify="space-between" id="a-flex-21">
              <a-typography-text class="block flex-1 text-[22px] text-[#EE5B25] font-bold" id="a-typography-text-138"
                >校企合作</a-typography-text
              >
              <AppstoreFilled id="appstore-filled-11" class="text-[#e5e5e5] text-[22px]" />
            </a-flex>
            <a-list class="py-1" id="a-list-10">
              <a-list-item v-for="(item, index) in list15" :key="index" class="!px-0 !border-b-0" :id="`a-list-item-${66 + index}`">
                <a-typography-link href="#" class="!text-[#999] line-clamp-1 py-0" :id="`a-typography-link-${140 + index}`">
                  <a-badge
                    class="w-2 h-2 bg-[radial-gradient(circle_at_center,#EE5C25_0%,transparent_100%)] rounded-full mr-1"
                    :id="`a-badge-${45 + index}`"
                  />
                  <a-typography-text :id="`a-typography-text-${139 + index}`">
                    {{ item.title }}
                  </a-typography-text>
                </a-typography-link>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </a-typography-paragraph>
    </a-flex>
  </div>
</template>

<script setup>
  const list12 = [
    { title: '北京农业职业学院食品与生物工程学院举' },
    { title: '坚卓勤勉担使命 自强奋进谱新篇-重庆' },
    { title: '巳巳如意如意 福满劳职-北京劳动' },
    { title: '江西制造親小技术学院2025年教职量' },
    { title: '"迎新春、贺新年"淄博师范高等专科学' },
  ];
  const list13 = [
    { title: '大同职业学院当选歌件和信息技术服务业产教融合共同体理事' },
    { title: '郑州电力昌等专科学校信通学院：假期社会实战洁动精彩纷呈' },
    { title: '鄂州职小大学：爱心妈妈专装送温暖具情暖单心' },
    { title: '四川信息职业技术学院在2024年"中银杯"四川省职业院校技' },
    { title: '合肥职业技不学院医学院台开学期利学管上作会以 全力十后！' },
    { title: '王懂礼教授来枣庄职业学院分享基层学生工作"五条心法"' },
    { title: '郑州M电力高等专科学校能源学院组织召开青年教师技能提升研讨会' },
    { title: '白城医学高等专科学校领导深入新校区调研在建项目复工情况' },
    { title: '山东工业职业学院组织"精益管理〞培训推动创新改革' },
    { title: '枣庄职业学院意识形态工作专题培训举办' },
  ];
  const list14 = [
    { title: '"六个年"行动|泉州医学高等专科学' },
    { title: '"六个年"行动|泉州医学高等专科学' },
    { title: '"六个年"行动|泉州医学高等专科学' },
    { title: '"枣庄职业学院：以"一站式"服务为导向' },
    { title: '"新疆石河子职业技术学院：构建培训服务等专科学' },
  ];
  const list15 = [
    { title: '荆州职亚校不学院生物么上学际剧往联付' },
    { title: '四川信息职业技术学院与熊猫供电侠机电' },
    { title: '江西工业贸易职业技术学院党委书记、院' },
    { title: '甘肃工业职业技术学院党委副书记、院长' },
  ];
</script>
<style scoped></style>
